import React, { useEffect, useRef, useState } from "react";

import {
  ActivityIndicator,
  Dimensions,
  Image, NativeModules,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet, Text, TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import AntDesign from "react-native-vector-icons/AntDesign";
import Entypo from "react-native-vector-icons/Entypo";
import Colors from "../../util/Colors";
import Toast from "react-native-easy-toast";
import EvilIcons from "react-native-vector-icons/EvilIcons";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import { login163, login163Status } from "../../request/neteaseRequest";

export default function(props){

  let [phone, setPhone] = useState("");
  let [pwd, setPwd] = useState("");
  let [loading, setLoading] = useState(false);
  const toast = useRef(null);

  function back(){
    props.navigation.pop()
  }

  async function login(){
    setLoading(true);
    await login163(phone,pwd,(r) => {
      if(r !== -1) {
        NativeModules.ToolModule.saveNeteaseCookie(r).then(() => {
          setTimeout(() => {
            login163Status((r) => {
              if (r !== -1) {
                //console.log('back```');
                props.navigation.pop();
              }
            })
            setLoading(false);
          },2000);
        });
      }else {
        setLoading(false);
        toast.current.show('登陆失败，请重试');
      }
    })
  }
  return(
    <View style={styles.contain}>

      <Toast
        ref={toast}
        position="center"
        style={{ backgroundColor: Colors.colorPrimary }}
      />
      <View style={styles.top}>
        <AntDesign
          name={'arrowleft'}
          size={30}
          style={styles.icon}
          color={'white'}
          onPress={back}
        />

        <View style={styles.layoutText}>
          <Text style={styles.itemTitle} numberOfLines={1}>
            网易云音乐登录
          </Text>
        </View>

      </View>
      {loading&&
        <View style={[{position:"absolute",flex: 1, left:width/2 - 23,top:height / 2 -23,zIndex:99999},props.style]}>
          <ActivityIndicator
            size={46}
            color={'white'}
            animating={true}
          />
        </View>
      }

      <Image source={require('../../images/loginNetease.jpeg')} style={styles.img}/>
      <View style={styles.login}>
        <TextInput style={styles.phone}
                   onChangeText={(text)=>phone=text}
        >

        </TextInput>
        <TextInput style={styles.pwd}
          onChangeText={(text)=>pwd=text}
        >

        </TextInput>
        <TouchableOpacity style={styles.neteBtn} onPress={login}>
          <Text style={styles.itemTitle}>
            登录(输入：手机号  密码)
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  )


}
const screen = Dimensions.get('window');
const width = screen.width;
const height = screen.height;

const styles = StyleSheet.create({
  contain:{
    width:width,
    height:height
  },
  neteBtn:{
    width:width,
    height:45,
    borderWidth:2,
    marginTop:10,
    marginBottom:10,
    flexDirection: 'row',
    justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems: 'center',
    // backgroundColor:'rgba(100,101,101,0.49)',
    backgroundColor:Colors.colorPrimary,
  },
  phone:{
    width:width,
    height:45,
    borderWidth:2,
    borderColor:'white',
    backgroundColor:'rgba(100,101,101,0.49)',
    color:'white',
    fontSize:16
  },
  pwd:{
    width:width,
    height:45,
    borderWidth:2,
    borderColor:'white',
    backgroundColor:'rgba(100,101,101,0.49)',
    color:'white',
    fontSize:16
  },
  top:{

    height:60,
    width:width,
    backgroundColor:Colors.colorPrimary,
    flexDirection: 'row',
    justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems: 'center',


  },
  login:{

    width:width,
    position:"absolute",
    bottom:66

  },
  icon:{
    flex:1,
    height:30,
    width:30
  },
  layoutText:{
    position:'absolute',

    justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems: 'center',
  },
  itemTitle:{
    color:'white',
    fontSize:16
  },
  btnText:{
    fontSize:20
  },
  fresh:{
    position:"absolute",
    right:10
  },
  statusContain:{
    width:width ,
    height:height / 4,
    backgroundColor:'rgba(105,105,105,0.09)'
  },
  img:{
    width:width,
    height:height-60-55
  }
});
